<template>
  <div id="self">
    <img src="../../../static/home.jpg" width="100%" height="150">
    <f7-list media-list bg-color="white" class="no-margin">
      <f7-list-item :title="user.name">
        <div slot="subtitle">
          <div>角色：<span v-for="role in user.role" :key="role.id">{{role.name}} </span></div>
          <div>机构：<span v-for="place in user.place" :key="place.id">{{place.pname}} </span></div>
        </div>
      </f7-list-item>
    </f7-list>
    <f7-block-title></f7-block-title>
    <f7-list bg-color="white" class="no-margin">
      <f7-list-item link title="修改密码" @click="modpwd"></f7-list-item>
    </f7-list>
    <f7-block-title></f7-block-title>
    <f7-list bg-color="white" class="no-margin">
      <f7-list-item link title="检查更新" :after="version" @click="update"></f7-list-item>
    </f7-list>
    <f7-block-title></f7-block-title>
    <f7-list bg-color="white" class="no-margin">
      <f7-list-button title='退出登录' color="red" class='text-align-center' @click="loginout"></f7-list-button>
    </f7-list>
  </div>
</template>
<script>
import { f7List, f7ListItem, f7ListButton, f7BlockTitle } from 'framework7-vue'
import md5 from "blueimp-md5"
import { mapState, mapActions } from 'vuex'
import install from 'utils/install'
export default {
  components: {
    f7List,
    f7ListItem,
    f7ListButton,
    f7BlockTitle
  },
  computed: {
    ...mapState({
      user: state => state.user
    })
  },
  data() {
    return {
      version: ''
    }
  },
  async created() {
    this.$root.$off('destroy-index').$on('destroy-index', () => {
      this.$destroy()
    })
    if (!this.$device.android) return
    const version = await cordova.getAppVersion.getVersionNumber()
    this.version = version
  },
  methods: {
    ...mapActions([
      'update_user'
    ]),
    loginout() {
      this.$f7.dialog.confirm('确定退出登录', '', () => {
        this.$f7.views.main.router.navigate('/login', { reloadAll: true })
        localStorage.user = ''
      })
    },
    modpwd() {
      const htmlStr =
        `<form class="list form-store-data no-margin" id="modpwd-form">
          <ul style="margin-top: 15px; padding-top: 15px;">
            <li class="item-content item-input" style="padding-left: 0;">
              <div class="item-inner" style="padding-right: 0;">
                <div class="item-title item-label">旧密码</div>
                <div class="item-input-wrap">
                  <input name="oldPwd" type="password">
                  <span class="input-clear-button"></span>
                </div>
              </div>
            </li>
            <li class="item-content item-input" style="padding-left: 0;">
              <div class="item-inner" style="padding-right: 0;">
                <div class="item-title item-label">新密码</div>
                <div class="item-input-wrap">
                  <input name="newPwd" type="password">
                  <span class="input-clear-button"></span>
                </div>
              </div>
            </li>
            <li class="item-content item-input" style="padding-left: 0;">
              <div class="item-inner" style="padding-right: 0; padding-bottom: 0;">
                <div class="item-title item-label">确认密码</div>
                <div class="item-input-wrap">
                  <input name="rePwd" type="password">
                  <span class="input-clear-button"></span>
                </div>
              </div>
            </li>
          </ul>
        </form>`
      this.$f7.dialog.create({
        title: '修改密码',
        content: htmlStr,
        animate: false,
        buttons: [{
            text: '取消'
          },
          {
            text: '修改',
            close: false
          }
        ],
        onClick: async(ev, index) => {
          if (index === 1) {
            const oldPwd = this.$$(ev.el).find('input[name=\'oldPwd\']').val(),
              newPwd = this.$$(ev.el).find('input[name = \'newPwd\']').val(),
              rePwd = this.$$(ev.el).find('input[name = \'rePwd\']').val()
            if (!oldPwd || !newPwd) {
              this.$f7.toast.show({
                text: '密码不能为空'
              })
              return
            } else if (!rePwd) {
              this.$f7.toast.show({
                text: '请输入确认密码'
              })
              return
            } else if (newPwd !== rePwd) {
              this.$f7.toast.show({
                text: '两次密码不一致'
              })
              return
            }
            const modpwd = await this.request('/modpwd', { userId: this.user.id, oldPwd: md5(`${oldPwd}tpgj`), newPwd: md5(`${newPwd}tpgj`) })
            this.$f7.toast.show({
              text: modpwd.msg
            })
            if (modpwd.code === 1) {
              ev.close()
            }
          }
        }
      }).open()
    },
    async update() {
      if (!this.$device.android) return
      const v = await this.request('/version', { version: this.version })
      if (v.code === 0) {
        this.$f7.toast.show({ text: v.msg })
      } else {
        const { time, detail, version, apkname, src } = v.data,
          des = `<div><div>发布时间：${time}</div>${detail.split('\\n').join('</div><div>')}</div>`
        this.$f7.dialog.confirm(des, `新版本${version}，请升级`, () => {
          this.$f7.toast.show({ text: '正在下载安装包' })
          install(apkname, src).catch(err => {
            this.$f7.toast.show({ text: '更新失败，请稍后重试' })
          })
        })
      }
    }
  }
}
</script>
<style>
#self .block-title {
  margin: 5px;
}
</style>